<!--
<div class="jumbotron">
  <h1>'Allo, 'Allo!</h1>
  <p class="lead">
    <img src="images/yeoman.png" alt="I'm Yeoman"><br>
    Always a pleasure scaffolding your apps.
  </p>
  <p><a class="btn btn-lg btn-success" ng-href="#">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
</div>
-->
<div ng-controller="MainCtrl" id="film-table">

<!-- Example row of columns -->
      <div class="row row-xs-height" ng-repeat="row in filmChunks">
        <!--<div class="col-sm-6 col-md-4" ng-repeat="film in row">-->
        <div class="col-xs-12 col-sm-4" ng-repeat="film in row">
            <a href='#/film/{{film.id}}'>
            <div class="thumbnail" id="film-{{film.id}}">
                <img ng-src="{{baseUrl}}/films/{{film.id}}/cover?cb={{imgTimestamp}}" alt="film cover image">
                <div class="caption">
                    <h2>{{film.title}}</h2>
                    <p>{{film.description| limitTo:120}} ...</p>
                </div>
            </div>
            </a>
        </div>
        <!--<div class="col-lg-4 col-xs-height" ng-repeat="film in row">
          <h2>{{film.title}}</h2>
          <p>{{film.description}}</p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>-->
    </div>
<!--pagination -->
<center><ul id="pagination-demo" class="pagination-sm"></ul></center>

<!-- add the following "clearfix" to prevent to break the footer, see http://stackoverflow.com/questions/23872755/bootstrap-pull-left-and-right-in-panel-footer-breaks-footer -->
<div class="clearfix"></div>
</div>
